<template>
  <div class="box" :id="id" :option="option"></div>
</template>
<script>
import HighCharts, { charts } from 'highcharts'

export default {
  props: {
    id: {
      type: String
    },
    //option 是图表的配置数据
    option: {
      type: Object
    }
  },
  mounted() {
    console.log(this.option,'123123')
    this.initCharts()


  },
  methods: {
    initCharts() {
      this.$el.style.height = this.option.chart.height
      HighCharts.chart(this.id, this.option)
    }
  },
  watch: {
    option: {
      handler(newval) {
        this.initCharts()
      },
      deep: true
    }
  }
}
</script>
 
<style scoped>
/* 容器 */
.box {
  width: 100%;
  height: 15.75rem;
}
</style>